<template>
  <div class="container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="用户管理" name="first">
        <el-form
          ref="form"
          label-width="140px"
          :model="formData"
          :rules="formRules"
        >
          <el-form-item label="标题">
            <el-input v-model="formData.title" placeholder="请输入" style="width:300px" />
            <el-button type="info" icon="el-icon-search">查重</el-button>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input v-model="formData.author" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="formData.cateid" placeholder="请选择">
              <el-option v-for="(item,index) in cate" :key="index" :label="item.catename" :value="item.id" />

            </el-select>
          </el-form-item>
          <el-form-item label="阅读次数" prop="click">
            <el-input-number v-model="formData.click" :min="1" :max="10" label="描述文字" />
          </el-form-item>
          <el-form-item label="创建时间" prop="create_date">
            <div class="block">
              <span class="demonstration" />
              <el-date-picker
                v-model="formData.create_date"
                type="datetime"
                placeholder="选择日期时间"
                value-format="timestamp"
              />
            </div>
          </el-form-item>
          <el-form-item prop="ishot" label="是否推荐">
            <template>
              <el-tooltip :content="'Switch value: ' + formData.ishot" placement="top">

                <el-switch
                  v-model="formData.ishot"
                  active-value="1"
                  inactive-value="0"
                  active-text="否"
                  inactive-text="是"
                />

              </el-tooltip>
            </template>
          </el-form-item>
          <!-- 0表示不推荐1表示推荐 -->
          <el-form-item prop="istop" label="是否置顶">
            <template>
              <el-tooltip :content="'Switch value: ' + formData.istop" placement="top">

                <el-switch
                  v-model="formData.istop"
                  active-value="1"
                  inactive-value="0"
                  active-text="否"
                  inactive-text="是"
                />

              </el-tooltip>
            </template>
          </el-form-item>
          <el-form-item label="收藏数量" prop="lovenum">
            <el-input v-model="formData.lovenum" placeholder="请输入" style="width:300px" />
          </el-form-item>
          <el-form-item label="链接图片">
            <el-upload
              ref="staffPhoto"
              class="upload-demo"
              action="#"
              list-type="picture"
              :http-request="httpRequset"
              :file-list="fileList"
            >
              <img :src="showImgUrl(formData.pic)" alt="" height="80px">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="文章标签">
            <template>
              <el-checkbox-group v-model="checkList" @change="change">
                <el-checkbox v-for="(item,index) in tag" :key="index" :label="item.tagname" />

              </el-checkbox-group>
            </template>
          </el-form-item>

        </el-form>
      </el-tab-pane>
      <el-tab-pane label="SEO信息" name="second">
        <el-form
          ref="form"
          label-width="140px"
          :model="seoData"
          :rules="formRules"
        >
          <el-form-item label="seo关键字" prop="keywords">
            <el-input
              v-model="formData.keywords"
              type="textarea"
              :rows="3"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="seo的描述" prop="description">
            <el-input
              v-model="formData.description"
              type="textarea"
              :rows="3"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="文章内容" name="third">
        <el-form ref="form" label-width="80px">

          <el-form-item label="内容">
            <quill-editor v-model="formData.content" style="height:500px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">确认</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-row type="flex" justify="center">
        <el-button
          type="primary"
          size="small"
          @click="onSubmit"
        >立即发布</el-button>
        <el-button type="small">保存草稿</el-button>
        <el-button size="small" @click="colse">返回列表</el-button>
      </el-row>
    </el-tabs>
  </div>
</template>

<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { UploadFile } from '@/api/user'
import { getArticleAllListApi } from '@/api/adv_cate'
import { addArticleInfoApi, updateArticleInfoApi, getArticleListApi, getArticleInfoApi } from '@/api/adv_article'
import { getAdvTagAllListApi } from '@/api/adv_tag'
export default {
  name: 'AddArticle',
  components: {
    quillEditor
  },
  data() {
    return {
      activeName: 'first',
      formData: {
        author: '',
        cateid: '',
        click: '',
        title: '',
        create_date: '',
        ishot: '',
        istop: '',
        lovenum: '',
        pic: '',
        tags: '',
        keywords: '',
        description: '',
        content: ''
      },
      seoData: {

      },
      tag: [],
      checkList: [],
      cate: [],
      // 表单验证规则
      formRules: {
        author: [{ required: true, message: '请输入', trigger: 'blur' }],
        cateid: [{ required: true, message: '请输入', trigger: 'blur' }],
        click: [{ required: true, message: '请输入', trigger: 'change' }],
        catename: [{ required: true, message: '请输入', trigger: 'blur' }],
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        ishot: [{ required: true, message: '请输入', trigger: 'blur' }],
        lovenum: [{ required: true, message: '请输入', trigger: 'blur' }],
        pic: [{ required: true, message: '请输入', trigger: 'blur' }],
        pitagsc: [{ required: true, message: '请输入', trigger: 'blur' }],
        keywords: [{ required: true, message: '请输入', trigger: 'blur' }],
        description: [{ required: true, message: '请输入', trigger: 'blur' }]

      },
      queryData: {
        advposdesc: '',
        advposname: '',
        page: 1,
        limit: 10
      },
      cateData: {
        catename: '',
        page: 1,
        limit: 10
      },
      fileList: [],
      id: null

    }
  },

  created() {
    this.initData()
    this.id = this.$route.params.id
    // console.log(this.$route.params.id)
  },
  mounted() {

  },

  methods: {
    showImgUrl(url) {
      return process.env.VUE_APP_BASE_API + '/' + url
    },
    change() {
      this.formData.tags = this.checkList.join(',')
    },
    async initData() {
      // 发起请求
      await getArticleListApi(this.queryData)
      // console.log(res.cateid)
      // // 标签
      const res1 = await getAdvTagAllListApi()
      this.tag = res1
      // 分类
      const res2 = await getArticleAllListApi()
      this.cate = res2

      // console.log(this.id)
      // 获取行详情
      if (this.id) {
        const data = await getArticleInfoApi(this.id)
        this.formData = data
        this.checkList = data.tags.split(',')
      }

      // this.formData.cateid = res.cateid
    },
    // 提交行为
    async onSubmit() {
      // 表单的校验
      await this.$refs.form.validate()
      // 加工处理表单数据(拷贝一份再加工)
      // 请求的发生
      this.formData.id
        ? await updateArticleInfoApi(this.formData)
        : await addArticleInfoApi(this.formData)
      // 提示效果
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      // 关闭弹框
      this.$router.push('/content_article')
    },
    async  httpRequset(result) {
      // console.log(result)
      // 异步文件操作
      // 1实例一个formData对象
      const fd = new FormData()
      // 2往里面放入数据
      fd.append(`file`, result.file)
      // 3调用上传接口
      const res = await UploadFile(fd)
      // console.log(res)
      this.formData.pic = res.savePath
    },
    colse() {
      this.$router.push('/content_article')
      this.formData = {
        author: '',
        cateid: '',
        click: '',
        title: '',
        create_date: '',
        ishot: '',
        istop: '',
        lovenum: '',
        pic: '',
        tags: ''
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.el-tabs{
  margin-top: 80px;
  margin-left: 20px;
}
</style>
